<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,width=device-width" />
<link rel="stylesheet" href="${basePath}/js/colorpicker/css/colorpicker.css" type="text/css" />
<link rel="stylesheet" href="${basePath}/js/colorpicker/css/custom.css" type="text/css" />
<title>智银华通-文章编辑器</title>
<link rel="shortcut icon" type="image/ico" href="${basePath}/favicon.ico?v=1"/>
</head>
<body>
	<div style="position: relative; background-color: #fff; border-top: 4px solid #333; border-bottom: 1px solid #d9dadc; height: 70px;">
		<div style="float: left; padding-top: 10px;padding-left:50px;">
			<img src="${basePath}/images/logo.png">
		</div>
		<div style="float: right; padding-top: 10px; margin-right: 50px; margin-top: 10px;">
			<!-- 右侧区域 -->欢迎使用智银华通微信文章编辑器
		</div>
	</div>
	<div class="wxeditor" style="margin: 0px;">
		<div class="clearfix">
			<div class="left clearfix">
				<div class="tabbox clearfix">
					<ul class="tabs" id="tabs">
						<li><a class="current" href="javascript:void(0);" tab="tab1">关注</a></li>
						<!--javascript:void(0); 点击</a>点击链接后不会回到网页顶部,<A href="#">点击</a>  点击后会回到网面顶部 -->
						<li><a href="javascript:void(0);" tab="tab2" class="">标题</a></li>
						<li><a href="javascript:void(0);" tab="tab3" class="">正文</a></li>
						<li><a href="javascript:void(0);" tab="tab4">分割线</a></li>
						<li><a href="javascript:void(0);" tab="tab5" class="">阅读全文</a></li>
						<li><a href="javascript:void(0);" tab="tab7">互推</a></li>
						<li><a href="javascript:void(0);" tab="tab8" class="">动态背景</a></li>
						<li><a href="javascript:void(0);" tab="tab9" class="">图文模版</a></li>
						<li><a href="javascript:void(0);" tab="tab10" class="">分享</a></li>
						<li><a href="javascript:void(0);" tab="tab11" class="">节日</a></li>
					</ul>
					<em class="fr"></em>
				</div>
				<div class="tplcontent">
					<div id="colorpickerbox">
						<p id="colorpickerHolder"></p>
					</div>
					<div>
						<div class="tab_con" id="tab1"></div>
						<div class="tab_con dn" id="tab2"></div>
						<div class="tab_con dn" id="tab3"></div>
						<div class="tab_con dn" id="tab4"></div>
						<div class="tab_con dn" id="tab5"></div>
						<div class="tab_con dn" id="tab7"></div>
						<div class="tab_con dn" id="tab8"></div>
						<div class="tab_con dn" id="tab9"></div>
						<div class="tab_con dn" id="tab10"></div>
						<div class="tab_con dn" id="tab11"></div>
					</div>
				</div>
				<div class="goto">→</div>
			</div>
			<div class="right">
				<script id="container" type="text/plain">文章编辑完成后可以将文章拷贝到您需要的地方!</script>
			</div>
		</div>
	</div>
	
	<#include "include/footer.html">
	<script type="text/javascript" src="${basePath}/js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="${basePath}/js/colorpicker/colorpicker.js"></script>
    <script type="text/javascript" src="${basePath}/js/ue/ueditor.config.js"></script>
    <script type="text/javascript" src="${basePath}/js/ue/ueditor.all.js"></script>
	<script type="text/javascript">
		$(function(){
			var b=["borderTopColor","borderRightColor","borderBottomColor","borderLeftColor"],d=[];$.each(b,function(a){d.push(".itembox .wxqq-"+b[a])});
			$('#colorpickerHolder').ColorPicker({flat : true,color:"#eb0014",onChange:function(a,e,f){$(".itembox .wxqq-bg").css({backgroundColor:"#"+e});$(".itembox .wxqq-color").css({color:"#"+e});$.each(d,function(g){$(d[g]).css(b[g],"#"+e)})}});
			
			var map = {"tab1":"focus","tab2":"title","tab3":"content","tab4":"splite","tab5":"article",
						"tab7":"send","tab8":"background","tab9":"pictemplate"};
			$("#tab1").load("${basePath}/anno/wres/"+map["tab1"]);
			$("#tabs a").click(function(){
				$("#tabs .current").removeClass("current");
				var $a = $(this).addClass("current");
				var tab = $a.attr("tab");
				var $div = $("#"+tab);
				$(".tab_con").not(".dn").addClass("dn");
				$div.removeClass("dn");
				if(!$div.html()||$div.html()==""){
					$div.load("${basePath}/anno/wres/"+map[tab],function(){
						$('#colorpickerHolder').ColorPickerSetColor("#eb0014");//00bbec
					});
				}
			});
			
			$(".itembox").live("click",function(){
				var html = this.innerHTML;
				//ue.setContent(html,true);
				ue.execCommand('inserthtml', html);
			});
		});
		var ue = UE.getEditor('container',{
        	 autoHeightEnabled : true,
        	 initialFrameWidth : 650,
        	 initialFrameHeight : 450,
        	 allowDivTransToP: false,
        	 toolbars: [[
                'source', //源代码
                'fontfamily', //字体
                'fontsize', //字号
                'forecolor', //字体颜色
                'bold', //加粗
                'italic', //斜体
                'underline', //下划线
                'strikethrough', //删除线
                'subscript', //下标
                'fontborder', //字符边框
                'superscript', //上标
                'indent', //首行缩进
                'pasteplain', //纯文本粘贴模式
                'selectall', //全选
                'preview', //预览
                'horizontal', //分隔线
                'removeformat', //清除格式
                'time', //时间
                'date', //日期
                'unlink', //取消链接
                'inserttable', //插入表格
                'inserttitle', //插入标题
                'deletetable', //删除表格
                'cleardoc', //清空文档
                'paragraph', //段落格式
                'simpleupload', //单图上传
                'insertimage', //多图上传
                'link', //超链接
                'emotion', //表情
                'spechars', //特殊字符
                'map', //Baidu地图
                'insertvideo', //视频
                'justifyleft', //居左对齐
                'justifyright', //居右对齐
                'justifycenter', //居中对齐
                'justifyjustify', //两端对齐
                'backcolor', //背景色
                'fullscreen', //全屏
                'imagenone', //默认
                'imageleft', //左浮动
                'imageright', //右浮动
                'imagecenter', //居中
                'lineheight', //行间距
                'attachment', //附件
                'edittip ', //编辑提示
                'autotypeset', //自动排版
                'touppercase', //字母大写
                'tolowercase', //字母小写
                'background', //背景
                'template', //模板
                'scrawl', //涂鸦
                'music', //音乐
                'charts', // 图表
        	]]
        });
	</script>
</body>
</html>